<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
	<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="shortcut icon" href="${staticServerAddress }/title.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/swiper.min.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<title>收货地址</title>
</head>
<body>
	<!-- 顶部tab -->
	<div class="tab-header">
		<div class="inner">
			<div class="pull-left">
				<div class="pull-left">嗨，欢迎来到<span class="cr">微风网</span></div>
				<a href="toAgentleavel">网店代销</a>
				<a href="toBreezeArticle4">帮助中心</a>
			</div>
			<div class="pull-right">
				<a href="toBreezeWelcome">我的微风</a>
				<a href="lineItem">我的订单</a>
				<a href="toBreezeIntegral">积分平台</a>
			</div>
		</div>
	</div>
	<!-- 顶部标题 -->
	<div class="bgf5 clearfix">
		<div class="top-user">
			<div class="inner">
				<a class="logo" href="home"><img src="images/icons/logo.jpg" alt="微风网" class="cover"></a>
				<div class="title">个人中心</div>
			</div>
		</div>
	</div>
	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<div class="pull-left bgf">
				<a href="toBreezeWelcome" class="title">微风欢迎页</a>
				<dl class="user-center__nav">
					<dt>帐户信息</dt>
					<a href="toPersonalData"><dd>个人资料</dd></a>
					<a href="toMoneyManage"><dd>资金管理</dd></a>
					<a href="toBreezeIntegral"><dd>积分平台</dd></a>
					<a href="shippingAddress"><dd>收货地址</dd></a>
					<a href="toBreezeCoupon"><dd>我的优惠券</dd></a>
					<a href="toBreezePaypwdModify"><dd>修改支付密码</dd></a>
					<a href="toModifyPassword"><dd>修改登录密码</dd></a>
				</dl>
				<dl class="user-center__nav">
					<dt>订单中心</dt>
					<a href="lineItem"><dd>我的订单</dd></a>
					<a href="toFavorite?pageIdx=1"><dd class="active">我的收藏</dd></a>
					<a href="toBreezeRefund"><dd>退款/退货</dd></a>
				</dl>
				<dl class="user-center__nav">
					<dt>服务中心</dt>
					<a href="toBreezeMailQuery"><dd>物流查询</dd></a>
					<a href="#"><dd>数据自助下载</dd></a>
					<a href="toBreezeArticle1"><dd>售后服务</dd></a>
					<a href="toBreezeArticle2"><dd>配送服务</dd></a>
					<a href="toBreezeArticle3"><dd>用户协议</dd></a>
					<a href="toBreezeArticle4"><dd>常见问题</dd></a>
				</dl>
				<dl class="user-center__nav">
					<dt>新手上路</dt>
					<a href="toBreezeArticle5"><dd>如何成为代理商</dd></a>
					<a href="toBreezeArticle6"><dd>代销商上架教程</dd></a>
					<a href="toBreezeArticle7"><dd>分销商常见问题</dd></a>
					<a href="toBreezeArticle8"><dd>付款账户</dd></a>
				</dl>
				<dl class="user-center__nav">
					<dt>微风网</dt>
					<a href="toBreezeArticle10"><dd>企业简介</dd></a>
					<a href="toBreezeArticle11"><dd>加入微风</dd></a>
					<a href="toBreezeArticle12"><dd>隐私说明</dd></a>
				</dl>
			</div>
			<div class="pull-right">
				<div class="user-content__box clearfix bgf">
					<div class="title">账户信息-收货地址</div>
					
					<form action="shippingAddress" method="post" class="user-addr__form form-horizontal" role="form">
						<p class="fz18 cr">新增收货地址<span class="c6" style="margin-left: 20px">收件人、手机号码、收货地址、均为必填项</span></p> <br>
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">收货人姓名：</label>
							<div class="col-sm-6">
								<input required="" minlength="1" maxlength="16" class="form-control" name="saReceiveName" id="saReceiveName" placeholder="请输入姓名" type="text">
							</div> 
						</div>
						<div style="height: 40px;"> <span style="margin-left: 130px;" id="err_1"></span>  </div>
						<div class="form-group" >
							<label for="details" class="col-sm-2 control-label">收货地址：</label>
							<div class="col-sm-10">
								<input required="" minlength="4" maxlength="160" class="form-control" name="saReceiveAddress" id="saReceiveAddress" placeholder="建议您如实填写详细收货地址，例如街道名称，门牌号码等信息" maxlength="30" type="text">
							</div> 
						</div>
						 <div style="height: 40px;"> <span style="margin-left: 130px; " id="err_2"></span> </div>
						<div class="form-group" >
							<label for="mobile" class="col-sm-2 control-label">手机号码：</label>
							<div class="col-sm-6">
								<input required="" minlength="11" maxlength="11" class="form-control" name="saReceivePhone" id="saReceivePhone" placeholder="请输入手机号码" type="tel">
							</div> 
						</div>
						<div style="height: 40px;"> <span style="margin-left: 130px;" id="err_3"></span>  </div>
						<!-- <div class="form-group" >
							<div class="col-sm-offset-2 col-sm-6">
								<div class="checkbox">
									<label><input type="checkbox"><i></i> 设为默认收货地址</label>
								</div>
							</div>
						</div> <br> -->
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-6">
								<button type="submit" class="but">保存</button>
							</div>
						</div>
						<script type="text/javascript">
							$("[name=saReceiveName]").blur(function(){
									var saReceiveName = $("#saReceiveName").val();
									// alert("userNickname")
									if (saReceiveName=="") {
										$("#err_1").empty();
                  						$("#err_1").html("您还没有填写姓名哦").appendTo("#err_1");
										if($("#err_1").val()!=null){
                  							setTimeout(function () {
											    $("#err_1").empty(); 
											},3000);
                  						}
									}else if (saReceiveName.length<1||saReceiveName.length>20) {
										$("#err_1").empty();
                  						$("#err_1").html("姓名格式不正确").appendTo("#err_1");
										if($("#err_1").val()!=null){
                  							setTimeout(function () {
											    $("#err_1").empty(); 
											},3000);
                  						}
                  					}else {
                  						$("#err_1").empty();
                  						$("#err_1").html("姓名格式正确").appendTo("#err_1");
										if($("#err_1").val()!=null){
                  							setTimeout(function () {
											    $("#err_1").empty(); 
											},3000);
                  						}
                  					}

							});

							$("[name=saReceiveAddress]").blur(function(){
									var saReceiveAddress = $("#saReceiveAddress").val();
									// alert("userNickname")
									if (saReceiveAddress=="") {
										$("#err_2").empty();
                  						$("#err_2").html("您还没有填写收货地址哦").appendTo("#err_2");
										if($("#err_2").val()!=null){
                  							setTimeout(function () {
											    $("#err_2").empty(); 
											},3000);
                  						}
									}else if (saReceiveAddress.length<1||saReceiveAddress.length>120) {
										$("#err_2").empty();
                  						$("#err_2").html("收货地址格式不正确").appendTo("#err_2");
										if($("#err_2").val()!=null){
                  							setTimeout(function () {
											    $("#err_2").empty(); 
											},3000);
                  						}
                  					}else {
                  						$("#err_2").empty();
                  						$("#err_2").html("收货地址格式正确").appendTo("#err_2");
										if($("#err_2").val()!=null){
                  							setTimeout(function () {
											    $("#err_2").empty(); 
											},3000);
                  						}
                  					}

							});

							$("[name=saReceivePhone]").blur(function(){
									var saReceivePhone = $("#saReceivePhone").val();
									// alert("userNickname")
									if (saReceivePhone=="") {
										$("#err_3").empty();
                  						$("#err_3").html("您还没有填写收货人手机号码哦").appendTo("#err_3");
										if($("#err_3").val()!=null){
                  							setTimeout(function () {
											    $("#err_3").empty(); 
											},3000);
                  						}
									}else if (saReceivePhone.length!=11) {
										$("#err_3").empty();
                  						$("#err_3").html("收货人手机号码格式不正确").appendTo("#err_3");
										if($("#err_3").val()!=null){
                  							setTimeout(function () {
											    $("#err_3").empty(); 
											},3000);
                  						}
                  					}else {
                  						$("#err_3").empty();
                  						$("#err_3").html("收货人手机号码格式正确").appendTo("#err_3");
										if($("#err_3").val()!=null){
                  							setTimeout(function () {
											    $("#err_3").empty(); 
											},3000);
                  						}
                  					}

							});
						</script>
					</form>
					
					
					<p class="fz18 cr">已保存的有效地址</p>

					<table class="table table-hover">
						<tr>
							<th>收件人</th>
							<th>收件人地址</th>
							<th>收件人手机</th>
							<th>操作</th>
							<th>默认地址</th>
						</tr>
				<c:forEach items="${shippingAddressResult}" var="b">
					<tr>
						<td>${b.saReceiveName}</td>
						<td>${b.saReceiveAddress}</td>
						<td>${b.saReceivePhone}</td>
						<td>删除</td>
						<c:choose>
							<c:when test="${b.saAddressState=='Y'}">
								<td>默认地址</td>
							</c:when>
							
							<c:when test="${b.saAddressState=='N'}">
								<td></td>
							</c:when>
						</c:choose>	
					</tr>
				</c:forEach>	
					</table>
				</div>
			</div>
		</section>
	</div>
	<!-- 右侧菜单 -->
	<div class="right-nav">
		<ul class="r-with-gotop">
			<li class="r-toolbar-item">
				<a href="toBreezeWelcome" class="r-item-hd">
					<i class="iconfont icon-user" ></i>
					<div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="toBreezeShopcart" class="r-item-hd">
					<i class="iconfont icon-cart" data-badge="${shoppingCartNum==null?0:shoppingCartNum }"></i>
					<div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="toFavorite?pageIdx=1" class="r-item-hd">
					<i class="iconfont icon-aixin"></i>
					<div class="r-tip__box"><span class="r-tip-text">我的收藏</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="#" class="r-item-hd">
					<i class="iconfont icon-liaotian"></i>
					<div class="r-tip__box"><span class="r-tip-text">联系客服</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="toIssues" class="r-item-hd">
					<i class="iconfont icon-liuyan"></i>
					<div class="r-tip__box"><span class="r-tip-text">留言反馈</span></div>
				</a>
			</li>
			<li class="r-toolbar-item to-top">
				<i class="iconfont icon-top"></i>
				<div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
			</li>
		</ul>
		<script>
			$(document).ready(function(){ $('.to-top').toTop({position:false}) });
		</script>
	</div>
	<!-- 底部信息 -->
	<div class="footer">
		<div class="footer-tags">
			<div class="tags-box inner">
				<div class="tag-div">
					<img src="images/icons/footer_1.gif" alt="厂家直供">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_2.gif" alt="一件代发">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_3.gif" alt="美工活动支持">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_4.gif" alt="信誉认证">
				</div>
			</div>
		</div>
		<div class="footer-links inner">
			<dl>
				<dt>微风网</dt>
				<a href="toBreezeArticle10"><dd>企业简介</dd></a>
				<a href="toBreezeArticle11"><dd>加入微风</dd></a>
				<a href="toBreezeArticle12"><dd>隐私说明</dd></a>
			</dl>
			<dl>
				<dt>服务中心</dt>
				<a href="toBreezeArticle1"><dd>售后服务</dd></a>
				<a href="toBreezeArticle2"><dd>配送服务</dd></a>
				<a href="toBreezeArticle3"><dd>用户协议</dd></a>
				<a href="toBreezeArticle4"><dd>常见问题</dd></a>
			</dl>
			<dl>
				<dt>新手上路</dt>
				<a href="toBreezeArticle5"><dd>如何成为代理商</dd></a>
				<a href="toBreezeArticle6"><dd>代销商上架教程</dd></a>
				<a href="toBreezeArticle7"><dd>分销商常见问题</dd></a>
				<a href="toBreezeArticle8"><dd>付款账户</dd></a>
			</dl>
		</div>
		<div class="copy-box clearfix">
			<ul class="copy-links">
				<a href="toAgentLevel"><li>网店代销</li></a>
				<a href="toClassRoom"><li>微风学堂</li></a>
				<a href="toBreezeAbout"><li>联系我们</li></a>
				<a href="toBreezeArticle10"><li>企业简介</li></a>
				<a href="toBreezeArticle5"><li>新手上路</li></a>
			</ul>
			<!-- 版权 -->
			<p class="copyright">
				© 2018-2020 微风网 版权所有，并保留所有权利<br>
				ICP备案证书号：渝ICP备20181806号-2&nbsp;&nbsp;&nbsp;&nbsp;重庆市沙坪坝区微电子产业园区&nbsp;&nbsp;&nbsp;&nbsp;Tel: 15881909100&nbsp;&nbsp;&nbsp;&nbsp;E-mail: 15881909100@qq.com
			</p>
		</div>
	</div>
</body>
</html>